<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>发送数据</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .chat {
                display: flex;
                justify-content: center;
                width: 100vw;
                height: 100vh;
            }

            .video-wrap {
                width: 100%;
                height: 100%;
                background-color: rgb(194, 194, 194);
                position: relative;
            }

            #local-video {
                width: 100%;
                height: 100%;
                outline: 1px solid blue;
            }

            #remote-video {
                width: 25%;
                height: 25%;
                position: absolute;
                left: 0;
                top: 0;
                outline: 1px solid red;
            }

            .logger {
                display: none;
                width: 360px;
                height: 720px;
                padding: 14px;
                line-height: 1.5;
                color: #4fbf40;
                background-color: #272727;
                box-sizing: border-box;
            }

            .error {
                color: red;
            }

            .button-wrap {
                display: flex;
                justify-content: center;
                position: absolute;
                bottom: 100px;
                left:50%;
                transform: translateX(-50%);
            }

            .button-wrap button {
                margin-left: 10px;
                width: 100px;
                height: 100px;
                outline:none;
                border: none;
            }
            .btn.call{
              background-color: rgb(13, 156, 13);
            }
            .btn.hangup{
              background-color: rgb(211, 29, 29);
              display: none;
            }
        </style>
    </head>

    <body>
        <div class="chat">
            <div class="video-wrap">
                <video id="local-video" muted></video>
                <video id="remote-video"></video>
                <div class="button-wrap">
                    <button id="call" class="btn call" onclick="call()">呼叫</button>
                    <button id="hangup" class="btn hangup" onclick="videoCall.hangUp()">挂断</button>
                </div>
            </div>
        </div>
        <script src="/js/videoCall.js"></script>
        <script src="/js/index.js"></script>
    </body>
</html>
